<template>
  <div>
    <Nav></Nav>
    <HeadNav></HeadNav>
    <div class="box_title">
      <p>
        {{ this.totalSize }}条结果 |
        <span style="color: #9d232c">{{ this.categoriesName }}</span>
      </p>
    </div>
    <div class="box">
      <div class="book_sort">
        <div class="tab">
          <div class="tab_head">全部分类</div>
          <div
            v-for="sort in this.fenlei"
            class="tab_list"
            :key="sort.categoriesId"
          >
            <router-link
              :to="{
                path: '/book_list',
                query: {
                  sousuo: 1,
                  id: sort.categoriesId,
                  name: sort.classname,
                },
              }"
              @click.native="goAddpage"
              ><div style="color: black;width: 100%">
                {{ sort.classname }}
              </div></router-link
            >
          </div>
        </div>
      </div>
      <div class="book_info1"  v-loading="loading">
        <div   class="book_content1" v-for="book in tableData" :key="book.isbn">
         
            <div class="book_content_img">
              <el-image
                v-image-preview
                style="width: 82%; height: 150px;margin:5px 9%"
                :src=" book.img"
                fit="fill"
              ></el-image>
            </div>
        
          <div class="book_content_info1">
             <router-link :to="{ path: '/book', query: { id: book.isbn } }"  @click.native="dianji(book.bookId)">
            <div class="book_name1">{{ book.title }}</div>
            <div class="book_list_content1">作者: {{ book.author }}</div>
            <div class="book_list_content1">ISBN: {{ book.isbn }}</div>
            <div class="book_list_content1">出版社: {{ book.bookPress }}</div>
            <div class="book_list_content1">
              出版时间: {{ book.createTime }}}
            </div>
            <div class="book_list_content1">原价: {{ book.price }}</div>
            <div class="book_list_content1">售价: {{ book.price }}</div>
                </router-link>
            <div>
              <el-button
                type="primary"
                icon="el-icon-shopping-cart-2"
                class="cartBtn"
                @click="gwc(book.bookId)"
                v-if="book.status==1"
                >加入购物车</el-button
              >
              <el-button @click.native="pay(book)" :disabled="book.status==0?true:false"  class="plainBtn" plain>{{book.status==0?'已下架':'立即购买' }}</el-button>
            </div>
          </div>
        
        </div>
        <div class="block" style="float: right;padding: 0px 30px 10px">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="index"
            :page-sizes="[5, 10, 20, 50, 100]"
            :page-size="pageSize"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalSize"
            pageNo="1"
          >
          </el-pagination>
        </div>
        <div
         v-if="tableData.length==0"
          style="width:100%;height: 50px;line-height: 50px;padding: 0px 20px"
        >
          不好意思，此分类暂时还没有图书......
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Nav from "../../com/components/Common/Nav";
import HeadNav from "../../com/components/Common/HeadNav";
import axios from "axios";
export default {
  components: { Nav, HeadNav },
  data() {
    return {
      loading:false,
      fenlei: [],
      booklist: [],
      type:'',//搜索类型
      categoriesId: "",
      categoriesName: "",
      pageSize: 10,
      totalSize: null,
      index: 1,
      tableData: [], //el-table  绑定的数据
      sousuo: "",
      bookId: "",
    };
  },
  methods: {
    dianji(val){   //点击量
    let params = new URLSearchParams();
    params.append("bookId", val);
      axios.post('/fl-book/addBookHits',params).then((res)=>{
        
      })
    },
    open2(item) {
      //请求成功提示
      this.$message({
        message: item,
        type: "success",
      });
    },
    open4() {
      //请求失败提示
      this.$message.error("用户没登陆！");
    },
 //立即购买
    pay(book){
    
   
     localStorage.setItem("order_list", JSON.stringify(book));
     
        this.$router.push({ path: '/dingdan_book', params: { userId: '123' }})
    
     
     
     
  },
    //获取分类数据
    good_fenlei() {
      axios
        .get("/fl-categories/getAllCategories", {})
        .then((res) => {
          this.fenlei = res.data.data;
          ;
        });
    },
    getList() {
      this.loading=true
      axios
        .get("/fl-book/getCategoriesBooks", {
          params: {
            categoriesId: this.categoriesId,
            page: this.index,
            pageSize: this.pageSize,
          },
        })
        .then((res) => {
          this.tableData = res.data.data[1].records;
          this.totalSize = res.data.data[1].total;
          ;
          ;
          //  this.getList();
          this.loading=false;
        });
        
      // this.tableData = this.booklist.filter(            //分页函数 filter筛选数组
      //   (item, index) =>
      //     index < this.index * this.pageSize &&
      //     index >= this.pageSize * (this.index - 1)
      // );
      // this.totalSize = this.booklist.length;
    },
    getselect(type,value) {
      //获取查询列表

      axios
        .get("/fl-searchBook/searchBooksByElastSearch", {
          params: {
            searchType: type,
            keywords: value,
            page: this.index,
            pageSize: this.pageSize,
          },
        })
        .then((res) => {
          ;
          this.tableData = res.data.data.slice(1, res.data.data.length);
          this.totalSize = res.data.data[0].total.value;
          
        });
    },
    handleSizeChange(val) {
      // ;
      this.pageSize = val;
      if(this.sousuo==1)
      this.getList();
      else this.getselect(this.type,this.categoriesName)
    },
    handleCurrentChange(val) {
      // ;
      this.index = val;
      if(this.sousuo==1)
      this.getList();
      else this.getselect(this.type,this.categoriesName)
    },
    goAddpage() {
      //路由在页面不跳转情况刷新
      this.$router.go(0);
    },
    gwc(ref) {
      //加入购物车
      ;
      const token = localStorage.getItem("token");
      this.userInfo = JSON.parse(localStorage.getItem("userInfo"));

      if (!token) {
        ;
        this.open4();
        this.loading.close();
      } else {
        ;
        var params = new URLSearchParams();
        params.append("username", this.userInfo.username);
        params.append("count", "1");
        params.append("bookId", ref);
        axios
          .post("/fl-carts/addBookToCarts", params, {
            headers: {
              //  ' Access-control-expose-headers':'authorization',
              "Content-Type": "application/x-www-form-urlencoded",
              Authorization: token,
            },
          })
          .then((res) => {
            ;
            ;
            this.open2(res.data.msg);
          })
          .catch((error) => {
            this.$message.error("请求出错");
            ;
          });
      }
    },
  },
  created() {
    this.sousuo = this.$route.query.sousuo;
    if (this.sousuo == 1) {
      this.categoriesId = this.$route.query.id; //接收分类列表返回的参数
      this.categoriesName = this.$route.query.name;
      // this.booklist=this.$query.book;
      this.getList();
    } else {
      this.sousuo=2
      this.type = this.$route.query.book;
      this.categoriesName = this.$route.query.bookname;
      // this.getList();
       this.getselect(this.type,this.categoriesName)
    }
    this.good_fenlei();
  },
};
</script>

<style>
.content {
  background-color: #ffffff;
}
.box_title {
  margin: 10px auto;
  width: 1240px;
  color: #545c64;
  padding: 5px 10px;
}
.box {
  margin: 10px auto;
  width: 1240px;
}
.book_sort {
  margin: 10px 10px;
  width: 200px;
  float: left;
  border-right: 1px #f3f0e9 solid;
}

.book_info1 {
  margin: 10px 10px;
  width: 1000px;
  float: right;
  background-color: #f7f7f6;
}
.tab {
  width: 100%;
}
.tab_head {
  padding-left: 5px;
  width: 100%;
  height: 40px;
  line-height: 40px;
  background-color: #f3f0e9;
  margin: 1px 0px;
}
.tab_list {
  padding-left: 5px;
  width: 100%;
  height: 40px;
  line-height: 40px;
  background-color: #ffffff;
  margin: 1px 0px;
}
.tab_list:hover {
  background-color: #a0a9b1;
}

.book_content1 {
  border: 1px #f3f0e9 solid;
  padding: 5px;
  margin: 10px auto;
  width: 940px;
  height: 190px;
  max-height: 240px;
  line-height: 35px;
  border: 1px solid #cacaca;
  padding: 15px;
}
.book_content1:hover {
  background-color: white;
}

.book_content_img {
  float: left;
  width: 150px;
  height: 160px;
  /*border: 1px solid black;*/
}
.book_content_info1 {
  float: right;
  width: 740px;
  height: 160px;
  color: black;
  /*border: 1px solid black;*/
}

.book_name1 {
  margin: 5px auto;
  width: 740px;
  line-height: 30px;
  font-size: 18px;
  color: #9d232c;
  overflow: hidden;
}

.book_list_content1 {
  width: 32%;
  display: inline-block;
  height: 20px;
  overflow: hidden;
  line-height: 18px;
  font-size: 14px;
}

.plainBtn {
  width: 100px;
  color: #9d232c;
  background-color: #f3f0e9;
  border: 1px #f3f0e9 solid;
  float: right;
  margin: 0px 5px;
  font-size: 14px;
}
.plainBtn:hover {
  background-color: white;
  color: #9d232c;
  border: 1px #b2bac2 solid;
}
.cartBtn {
  width: 140px;
  background-color: #9d232c;
  border: 1px #9d232c solid;
  float: right;
  margin: 0px 5px;
  font-size: 14px;
}
.cartBtn:hover {
  background-color: #f52b21;
}
</style>
